<!-- <template>
    <div class="item" v-for="item in 10">
        <div class="title">标题1</div>
        <div class="content">内容1</div>
    </div>
</template>

<style>
.item {
    width: 30px; /* 宽度设置为30px */
    height: 50px; /* 高度设置为50px */
    float: left; /* 使得每个item都横向排列 */
    margin-right: 10px; /* 可以根据需要调整间距 */
    position: relative; /* 相对定位，用于后续绝对定位的子元素定位 */
    overflow: hidden; /* 隐藏溢出部分内容 */
}

.title {
    width: 100%; /* 标题宽度100% */
    height: 50px; /* 标题高度50px */
    background-color: lightblue; /* 默认背景色 */
    text-align: center; /* 文本居中 */
    line-height: 50px; /* 行高等于高度，使文本垂直居中 */
    position: absolute; /* 绝对定位，使内容盒子能够覆盖住整个标题盒子 */
    top: 0; /* 顶部位置0 */
    left: 0; /* 左侧位置0 */
    transition: background-color 0.3s ease; /* 过渡效果，使背景颜色变化平滑 */
}

.content {
    width: 100%; /* 内容宽度100% */
    height: 50px; /* 内容高度50px */
    background-color: lightblue; /* 默认背景色 */
    text-align: center; /* 文本居中 */
    line-height: 50px; /* 行高等于高度，使文本垂直居中 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部位置0 */
    left: 0; /* 左侧位置0 */
    opacity: 0; /* 默认隐藏内容 */
    transition: opacity 0.3s ease; /* 过渡效果，使内容显现平滑 */
}

.item:hover .title {
    background-color: lightgreen; /* 鼠标悬停时标题背景色 */
}

.item:hover .content {
    opacity: 1; /* 鼠标悬停时显示内容 */
}
</style> -->

<template>
    <div>
        <iframe
            src="http://1.95.13.110:8082/#/green/show4"
            frameborder="0"
            class="iframe"
        >
        </iframe>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.iframe {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
    top: 0px;
}
</style>
